import React from 'react';
import '../css/fruittable.css'
const FruitTable = () => {
    const fruitData = [
        {
            title: "品类",
            context: ["草莓", "苹果", "香蕉", "葡萄", "水蜜桃"]
        },
        {
            title: "品牌",
            context: ["红富士", "静宁苹果", "好乐果"]
        },
        {
            title: "产地",
            context: ["山东省", "北京市", "河北省", "甘肃省", "山西省", "山东省"]
        },
        {
            title: "品种",
            context: ["王林", "爵士", "皇后", "富士"]
        },
        {
            title: "贮存",
            context: ["冷藏", "常温", "冷冻", "控温"]
        }
    ];

    return (
       <div className='fruittable'>
          {
            fruitData.map((item, index) => {
                return (
                    <div className='fruittr' key={index}>
                        <div className='tou'>{item.title}:</div>
                        {
                            item.context.map((item, index) => {
                                return(
                                    <div className='fruititem' key={index}>
                                        {item}
                                    </div>
                                )
                            })
                        }
                    </div>
                )
            })
          }
       </div>
    );
};

export default FruitTable;